﻿@{
    ViewData["Title"] = "首页";
}

<div class="">
    <!--category start-->
    <div mxa="x30_:_" class="atb-pc-screen-main-cates" style="height: 290px;position: relative;background: #fff;">
        <div mxa="x30_:a" class="con-wrap" style="width: 100%!important;position: relative;background: #fff;">
            <div mxs="x30_:_" class="left-nav" data-spm="1998549605" style="width: 280px;height: 280px;position: absolute;left: 0px;top: 0;z-index: 2;">
                <div class="chanel-list-wrap" id="J_MAIN_CHANEL" style="background-color: #F8F8F8;border: 1px solid #eee;border-radius: 12px;font: 12px/1.5 tahoma, arial;height: 100%;">
                    @foreach(var category in ViewData["Categories"] as List<Category>)
                    {
                        var id = category.Id;

                        var subCategories = ViewData["SubCategories"] as List<SubCategory>;

                        var subCategoriesById = subCategories.Where(r => r.CategoryId == id);
                        <div class="chanel-container">
                            <div class="chanel-container-inner clearfix" style="border-radius: 12px 12px 0 0;">
                                <div class="chanel-tags-wrap">
                                    <div class="chanel-title">
                                        <a href="" class="atbfont" target="_blank">ↂ</a>
                                        <a href="" class="title" target="_blank">@category.CategoryName</a>
                                    </div>
                                    <div class="chanel-tags clearfix">
                                        @foreach(var subCategory in subCategoriesById)
                                        {
                                            <a href="/Product/Index/?CategoryId=@(id)&subCategoryId=@(subCategory.Id)" class="" target="_blank">@subCategory.SubCategoryName</a>
                                        }
                                    </div>
                                </div>
                            </div>
                        </div>
                    }
                </div>
            </div>
            <div mxa="x30_:b" class="main-right clearfix">
                <div mxa="x30_:c" class="main-right-top" style="height: 280px;position: relative;z-index: 1;font-size: 0;">
                    <div mxa="x30_:d" class="slide-container clearfix">
                        <div mxa="x30_:e" class="slide-wrap swiper swiper-container-horizontal" id="index-mainSlide">
                            <div mxa="x30_:f" class="slide-con swiper-wrapper" style="height:280px;position:relative;left:0px;display:flex">
                                <div class="con-pannel swiper-slide swiper-slide-duplicate-active" data-swiper-slide-index="1">
                                    <a href="#" target="_blank">
                                        <img class="swiper-lazy swiper-lazy-loaded" src="~/imgs/001.jpg" width="730" height="280" />
                                    </a>
                                </div>
                                <div class="con-pannel swiper-slide swiper-slide-duplicate-active" data-swiper-slide-index="0">
                                    <a href="#" target="_blank">
                                        <img class="swiper-lazy swiper-lazy-loaded" src="~/imgs/002.jpg" width="730" height="280" />
                                    </a>
                                </div>
                                <div class="con-pannel swiper-slide swiper-slide-duplicate-active" data-swiper-slide-index="1">
                                    <a href="#" target="_blank">
                                        <img class="swiper-lazy swiper-lazy-loaded" src="~/imgs/001.jpg" width="730" height="280" />
                                    </a>
                                </div>
                                <div class="con-pannel swiper-slide swiper-slide-duplicate-active" data-swiper-slide-index="0">
                                    <a href="#" target="_blank">
                                        <img class="swiper-lazy swiper-lazy-loaded" src="~/imgs/002.jpg" width="730" height="280" />
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div mxa="x30_:g" class="bl-right-navigation">
                        <div mxs="x30_:e" class="right-brands-title" data-spm="19985674830">
                            <a target="_blank" href="/Home/Index" style="color:#ff0036;"><i class="atbfont">✮</i>我的商城</a>
                        </div>
                        <ul mxa="x30_:h" class="right-brands-list clearfix">
                            <li data-spm="19985674831">
                                <a target="_blank" href="/Home/Index" style="text-decoration: none!important;">
                                    <i class="atbfont" style="font-size: 22px;color:#c50a0a;">易购商城</i>
                                </a>
                            </li>
                            <li data-spm="19985674832">
                                <a target="_blank" href="">
                                    <img src="~/imgs/others/taobao.gif" width="119" height="61">
                                </a>
                            </li>
                            <li data-spm="19985674833">
                                <a target="_blank" href="">
                                    <img src="~/imgs/others/juhuasuan.gif" width="119" height="61">
                                </a>
                            </li>
                            <li data-spm="19985674834">
                                <a target="_blank" href="">
                                    <img src="~/imgs/others/chaojiyouxuan.png" width="119" height="61">
                                </a>
                            </li>
                            <li data-spm="19985674835">
                                <a target="_blank" href="" style="text-decoration: none!important;">
                                    <i class="atbfont" style="font-size: 22px;color:#ff4400;">九块九</i>
                                </a>
                            </li>
                            <li data-spm="19985674836">
                                <a target="_blank" href="">
                                    <img src="~/imgs/others/tianmaoguoji.png" width="119" height="61">
                                </a>
                            </li>
                            <li data-spm="19985674837">
                                <a target="_blank" href="">
                                    <img src="~/imgs/others/tianmaochaoshi.gif" width="119" height="61">
                                </a>
                            </li>
                            <li data-spm="19985674838">
                                <a target="_blank" href="">
                                    <img src="~/imgs/others/ailijiankang.png" width="119" height="61">
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--category end-->
    <div style="border-bottom-color:lightgray"></div>
    <!-- banner style 2 start -->
    <div class="banner-style-2 pt-100">
        <div class="container" style="margin-left:0px;margin-right:0px;padding-right:0px;padding-left:0px;">
            <div class="row">
                @foreach (var topDiscount in ViewData["TopDiscount3"] as List<Product>)
                {
                    <div class="col-md-4">
                        <div class="banner-style-2-img mb-res">
                            <img src="@topDiscount.ImageUrl" alt="">
                            <div class="banner-style-2-dec">
                                <h4>@topDiscount.Brand</h4>
                                <h3>降价 @(Math.Round( topDiscount.Preferential*100,0))% 销售</h3>
                                <a href="" onclick="javascript:buy(@(topDiscount.Id));return false;">购买</a><br>
                            </div>
                        </div>
                        <div class="shop-title f-left">
                            <h3><a href="/Product/Detail/@(topDiscount.Id)">@topDiscount.Name</a></h3>
                        </div>
                    </div>
                }
            </div>
        </div>
    </div>
    <!-- banner style 2 end -->
    <!-- shop area start -->
    <div class="portfolio-area pt-100 pb-70" style="padding-top:100px;padding-bottom:70px;">
        <div class="container">
            <div class="section-title text-center mb-50">
                <h2>新品爆款 <i class="fa fa-shopping-cart"></i></h2>
            </div>
            <div class="row portfolio-style-2">
                <div class="grid" style="position: relative; height: 100%;">
                    @foreach (var topNewProduct in ViewData["TopNew100"] as List<Product>)
                    {
                        <div class="col-md-3 col-sm-6 col-xs-12 mb-30">
                            <div class="single-shop">
                                <div class="shop-img">
                                    <a href="/Product/Detail/@(topNewProduct.Id)"><img src="@topNewProduct.ImageUrl" alt=""></a>
                                    <div class="shop-quick-view">
                                        <a href="/Product/Detail/@(topNewProduct.Id)" data-toggle="modal" data-target="#quick-view" title="预览">
                                            <i class="pe-7s-look"></i>
                                        </a>
                                    </div>
                                    <div class="price-up-down">
                                        <span class="sale-new">新品</span>
                                    </div>
                                    <div class="button-group">
                                        <a href="#" title="添加购物车" onclick="javascript:addCart(@(topNewProduct.Id));return false;">
                                            <i class="pe-7s-cart"></i>
                                            添加购物车
                                        </a>
                                        <a class="wishlist" href="#" onclick="javascript:buy(@(topNewProduct.Id));return false;" title="立即购买">
                                            <i class="pe-7s-like"></i>
                                            立即购买
                                        </a>
                                    </div>
                                </div>
                                <div class="shop-text-all">
                                    <div class="title-color fix">
                                        <div class="shop-title f-left">
                                            <h3><a href="/Product/Detail/@(topNewProduct.Id)">@topNewProduct.Name</a></h3>
                                        </div>
                                        <span class="price f-right">
                                            <span class="new">$@topNewProduct.PreferentialPrice</span>
                                        </span>
                                    </div>
                                    <div class="fix">
                                        <span class="f-left">@(topNewProduct.BasicStyle) | @(topNewProduct.ProductStyle)</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    }
                </div>
            </div>
        </div>
    </div>
    <!-- shop area end -->
</div>
<script type="text/javascript" src="~/js/shop.js"></script>